<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img height="500" src="./imgs/lazyload.gif" data="./imgs/1.jpg" alt=""><hr />
    <img height="500" src="./imgs/lazyload.gif" data="./imgs/2.jpg" alt=""><hr />
    <img height="500" src="./imgs/lazyload.gif" data="./imgs/3.jpg" alt=""><hr />
    <img height="500" src="./imgs/lazyload.gif" data="./imgs/4.jpg" alt=""><hr />
    <img height="500" src="./imgs/lazyload.gif" data="./imgs/5.jpg" alt=""><hr />
</body>
</html>



<script src="http://unpkg.com/jquery"></script>

<script>
    let t=null
    $.fn.extend({
        lazyload(){
            if(t)clearTimeout
            setTimeout(() => {
                let showTotalHeight=$(window).height()+$(document).scrollTop();
                $("img").each((index,item)=>{
                    let imgTop=$(item).offset().top
                    if(imgTop<=showTotalHeight){
                    $(item).attr("src",$(item).attr("data")) 
                    }
            })
            }, 500);
        }
    })
    $(window).scroll(function(){
        $("html").lazyload()
    })
     $("html").lazyload()
</script>